<template>
	<view class="box1">
		<view class="content">
			<view class="box-bac">
				<backVue></backVue>
			</view>
			<view class="conte">
				<!-- 地址选择 -->
				<view class="boxx">
					<u-icon name="map" color="#fff" size="25px"></u-icon>
					<input @click="show = true" v-model="city" type="text" placeholder="地区（必填）" disabled class="text" />
					<u-picker mode="region" v-model="show" @confirm="getCity"></u-picker>
				</view>
				<!-- 搜索 -->
				<view class="search">
					<u-search :show-action="false" :animation="false"></u-search>
					<button class="but">搜索</button>
				</view>
				<!-- 轮播图 -->
				<view class="wrap">
					<u-swiper :list="list"></u-swiper>
				</view>
			</view>
		</view>
		<view class="con-bot">
			<!-- 宫格 -->
			<view class="grid">
				<u-grid :col="5" :border="false">
					<u-grid-item v-for="(item,index) in grid" :key="index">
						<image :src="item.image" mode="" style="width: 40px; height: 40px;"></image>
						<view class="grid-text">{{item.text}}</view>
					</u-grid-item>
				</u-grid>
			</view>
			<!-- 秒杀 -->
			<view class="box-mp">
				<!-- 今日秒杀 -->
				<view class="mp-ms" @click="gotoo">
					<view class="titlee">
						<view style="margin-top: 10rpx;"><text style="font-weight: bolder;font-size: 15px;padding-left: 10px;">今日</text>
							<text style="font-weight: bolder;font-size: 15px;color: #e47842;">秒杀</text>
							<u-count-down ref="uCountDown" :timestamp="timestamp" bg-color="#f1ab49" color="#fff"
								style="padding-left: 5px;"></u-count-down>
						</view>
					</view>
					<view class="ms-con">
						限时折扣抢到就是赚到
					</view>
					<view class="imagee">
						<view class="ima-img">
							<image
								src="https://tse2-mm.cn.bing.net/th/id/OIP-C.An7h7g-izMfWvWn4WWMOEQHaE8?w=258&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
								mode=""></image>
						</view>
						<view class="ima-img">
							<image
								src="https://tse1-mm.cn.bing.net/th/id/OIP-C.LtZAVN7sGKtvmunXSScYbAHaEv?w=232&h=180&c=7&r=0&o=5&dpr=1.4&pid=1.7"
								mode=""></image>
						</view>
					</view>
				</view>
				<!-- 排行榜 -->
				<view class="mp-ps">
					<view class="tlee" style="margin-top: 10rpx;">
						<text
							style="font-size: 15px; font-weight: bolder; padding-right: 20rpx;padding-left: 10px;">热销排行榜</text>
						<text>更多</text><u-icon name="arrow-right" color="#f1b49e" size="25"></u-icon>
					</view>
					<view class="ms-con" style="margin: 5px 0px;">
						大家都在买
					</view>
					<view class="imagee" style="margin-top: 5px;">
						<view class="ima-img">
							<image src="../../static/OIP-C.png" mode=""></image>
						</view>
						<view class="ima-img">
							<image src="../../static/OIP-A.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="tlte">
				推荐 - 精选好物
			</view>
			<!-- 精选好物 -->
			<view class="jshw">
				<view class="jshw-box" v-for="(item,index) in hawu" :key="index" @click="gopro">
					<contbox :title1="item.title1" :imageurl="item.imageurl" 
					:title2="item.title2" :title3="item.title3" :title4="item.title4"
					:title6="item.title6" :title7="item.title7" :title5="item.title5" :title9="item.title9"
					:title8="item.title8">
					</contbox>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import backVue from '../../compoents/back/back.vue'
	import contbox from '../../compoents/contbox.vue'
	export default {
		components: {
			backVue,
			contbox
		},
		data() {
			return {
				// 精选好物
				
				hawu: [{
						imageurl:require('../../static/包子.png'),
						title1: '江苏无锡香菇猪肉包',
						title2: "猪肉肥美",
						title3: "鲜甜嫩软",
						title4: "多汁美味",
						title5: "多汁香嫩",
						title6: "8.79",
						title7: "笼",
						title9: "券",
						title8: "减10元"
					},
					{
						imageurl:require('../../static/西兰花.png'),
						title1: '浙江临海西兰花',
						title2: "基地直供",
						title3: "绿色培植",
						title4: "新鲜采摘",
						title5: "绿色新鲜",
						title6: "4.79",
						title7: "斤",
						title9: "券",
						title8: "减10元"
					},
					{
						imageurl:require('../../static/西红柿.png'),
						title1: '云南高山大西红柿',
						title2: "鲜嫩多汁",
						title3: "软甜爽口",
						title4: "入口美味",
						title5: "美味多汁",
						title6: "2.44",
						title7: "斤",
						title9: "券",
						title8: "减10元"
					},
					{
						imageurl: require('../../static/土豆.png'),
						title1: '宁夏西吉县马铃薯',
						title2: "基地直供",
						title3: "绿色培植",
						title4: "新鲜采摘",
						title5: "绿色新鲜",
						title6: "3.21",
						title7: "斤",
						title9: "券",
						title8: "减10元"
					}
				],
				//地址
				show: false,
				params: {
					province: true,
					city: true,
					area: true
				},
				city: null,
				// 倒计时
				timestamp: 86400,
				list: [{
						image: '/static/OIP-C.png',

					},
					{
						image: '/static/OIP-A.png',
					},
					{
						image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					}
				],
				grid: [{
					image: '../../static/团购.png',
					text: '团购',
				}, {
					image: '../../static/秒杀_开始秒杀.png',
					text: '秒杀',
				}, {
					image: '../../static/精选.png',
					text: '精选',
				}, {
					image: '../../static/领卷中心.png',
					text: '领券',
				}, {
					image: '../../static/分享.png',
					text: '分享',
				}, ]
			}
		},
		onLoad() {
			setTimeout(() => {
				this.$refs.uCountDown.start();
			}, 2000)
		},
		methods: {
      gopro(){
        uni.navigateTo({
          url:'/pages/product/product'
        })
      },
			getCity(e) {
				console.log(this.city);
				this.city = e.province.label + e.city.label + e.area.label
			},
      gotoo(){
        uni.navigateTo({
          url:'/pages/list/list'
        })
      }
		}
	}
</script>

<style scoped lang="scss">
	.box1 {
		background-color: rgba(132, 132, 132, 0.1);
		// height: 100vh;

		.content {
			width: 100%;
			display: flex;
			justify-content: center;

			.box-bac {
				width: 100%;
			}

			.conte {
				width: 90%;
				margin: auto;
				position: absolute;
				top: 150rpx;

				.boxx {
					display: flex;
					position: absolute;
					top: -50rpx;

					input {
						color: white;
					}
				}

				.search {
					width: 100%;
					height: 100rpx;
					position: relative;

					.but {
						background-color: #49ba7c;
						color: white;
						font-size: 25rpx;
						width: 150rpx;
						height: 50rpx;
						line-height: 50rpx;
						border-radius: 25rpx;
						position: absolute;
						top: 3px;
						right: 5px;
					}
				}

				.wrap {
					width: 100%;

					.u-list-scale {
						width: 100%;
					}
				}
			}
		}

		.con-bot {
			width: 90%;
			margin: auto;
			margin-top: 60px;

			// 宫格
			.grid {
				image {
					width: 40rpx;
					height: 40rpx;
				}

				.grid-text {
					font-size: 28rpx;
					margin-top: 4rpx;
				}
			}

			.box-mp {
				width: 100%;
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;

				.mp-ms {
					width: 48%;
					border-radius: 10rpx;
					background: linear-gradient(#feebd5, #fef6ed);

					.ms-con {
						color: rgba(132, 132, 132, 0.5);
						// padding: 10rpx;
						margin: 5px 10px;
					}

					.imagee {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.ima-img {
							width: 48%;
							height: 130rpx;
							margin-top: 20rpx;
							margin-bottom: 30rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				.mp-ps {
					width: 48%;
					border-radius: 10rpx;
					background: linear-gradient(#fee6e9, #fef8f9);

					.ms-con {
						color: rgba(132, 132, 132, 0.5);
						padding-left: 10px;
					}

					.imagee {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.ima-img {
							width: 48%;
							height: 130rpx;
							margin-top: 20rpx;
							margin-bottom: 30rpx;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}
			}

			.tlte {
				font-size: 30rpx;
				font-weight: bolder;
				margin: 30rpx;
			}

			.jshw {
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.jshw-box {
					margin-bottom: 25rpx;
					width: 48%;
					border-radius: 10%;
				}
			}
		}
	}
</style>